<template>
  <div class="dataResource-container">
    <div class="container-title">数据资源一本账</div>
    <!-- 第一行 -->
    <el-row class="dataResource-header">
      <titleView text="全市数据" :font-size="24" :bg-image="require('@/assets/image/yunziyuan.png')" />
      <div class="content">
        <div class="content-item" v-for="(item, idx) in headerContentData" :key="idx">
          <div class="item item-value">{{ item.value }}{{ item.id == 4 ? '亿条' : '类' }}</div>
          <div class="item item-label">{{ item.label }}</div>
        </div>
      </div>
    </el-row>
    <!-- 第二行 -->
    <el-row :gutter="20">
      <!-- 市级/市级目录详情 -->
      <el-col :span="12">
        <div class="dataResource-center">
          <el-row style="margin-bottom: 20px;">
            <titleView text="市级" :font-size="24" :bg-image="require('@/assets/image/yunziyuan.png')" />
            <div class="content">
              <div style="width: 250px;" class="content-item" v-for="(item, idx) in centerLeftContentData" :key="idx">
                <div class="item item-value">{{ item.value }}{{ item.id == 4 ? '亿条' : '类' }}</div>
                <div class="item item-label">{{ item.label }}</div>
              </div>
            </div>
          </el-row>
          <el-row>
            <titleView text="市级目录详情" :font-size="24" :bg-image="require('@/assets/image/yunziyuan.png')" />
            <el-table :data="tableData" style="width: 100%" :stripe="true">
              <el-table-column type="index" label="序号" width="50"> </el-table-column>
              <el-table-column label="部门">
                <template slot-scope="scope">
                  <el-button type="text" @click="centerDialod(scope.row,'departmentName')">{{ scope.row.departmentName }}</el-button>
                </template>
              </el-table-column>
              <el-table-column prop="num1" label="公共数据目录数量（类）"> </el-table-column>
              <el-table-column prop="num2" label="共享数据目录数量（类）"> </el-table-column>
              <el-table-column prop="num3" label="开放数据目录数量（类）"> </el-table-column>
            </el-table>
          </el-row>
        </div>
      </el-col>
      <!-- 区县级/区县目录详情 -->
      <el-col :span="12">
        <div class="dataResource-center">
          <el-row style="margin-bottom: 20px;">
            <titleView text="区县级" :font-size="24" :bg-image="require('@/assets/image/yunziyuan.png')" />
            <div class="content">
              <div style="width: 250px;" class="content-item" v-for="(item, idx) in centerLeftContentData" :key="idx">
                <div class="item item-value">{{ item.value }}{{ item.id == 4 ? '亿条' : '类' }}</div>
                <div class="item item-label">{{ item.label }}</div>
              </div>
            </div>
          </el-row>
          <el-row>
            <titleView text="区县目录详情" :font-size="24" :bg-image="require('@/assets/image/yunziyuan.png')" />
            <el-table :data="tableData" style="width: 100%" :stripe="true">
              <el-table-column type="index" label="序号" width="50"> </el-table-column>
              <el-table-column label="区县">
                <template slot-scope="scope">
                  <el-button type="text" @click="centerDialod(scope.row,'county')">{{ scope.row.county }}</el-button>
                </template>
              </el-table-column>
              <el-table-column prop="num1" label="公共数据目录数量（类）"> </el-table-column>
              <el-table-column prop="num2" label="共享数据目录数量（类）"> </el-table-column>
              <el-table-column prop="num3" label="开放数据目录数量（类）"> </el-table-column>
            </el-table>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!-- 第三行 -->
    <el-row class="dataResource-header">
      <titleView text="川渝数据" :font-size="24" :bg-image="require('@/assets/image/yunziyuan.png')" />
      <el-table :data="tableData" style="width: 100%" :stripe="true">
        <el-table-column prop="area" label=""> </el-table-column>
        <el-table-column prop="departmentNum" label="部门（个）"> </el-table-column>
        <el-table-column prop="num1" label="数据资源（类）"> </el-table-column>
        <el-table-column prop="num2" label="数据项（个）"> </el-table-column>
      </el-table>
    </el-row>
    <!-- 数据目录详情弹窗 -->
    <Dialog :visible="dialodData.show" :title="dialodData.title" @update:visible="dialodData.show = !dialodData.show">
      <el-table :data="tableData" style="width: 100%" :header-cell-style="{ backgroundColor:'#f5f7fa' }">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="area" label="数据资源名称"> </el-table-column>
        <el-table-column prop="departmentNum" label="数据项数量（个）"> </el-table-column>
        <el-table-column prop="num1" label="数据资源格式分类"> </el-table-column>
        <el-table-column prop="num2" label="数据关联应用名称"> </el-table-column>
        <el-table-column prop="num2" label="数据调用应用数量"> </el-table-column>
      </el-table>
    </Dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Dialog from '@/components/dialog'
import titleView from '@/components/title'
import countContent from '@/components/countContent'
import textAndCount from '@/components/textAndCount'
export default {
  name: 'DataResource',
  components: {
    Dialog,
    titleView,
    countContent,
    textAndCount
  },
  computed: {
    ...mapGetters(['name'])
  },
  data() {
    return {
      // 全市数据
      headerContentData: [
        { id: 0, label: '公共数据目录数量', value: '48971' },
        { id: 1, label: '共享目录数量', value: '11898' },
        { id: 2, label: '开放目录数量', value: '5603' },
        { id: 3, label: '归集数据数量', value: '9693' },
        { id: 4, label: '归集数据条数', value: '36.5' },
      ],
      // 市级/市级目录详情
      centerLeftContentData: [
        { id: 0, label: '公共数据目录数量', value: '20340' },
        { id: 1, label: '共享目录数量', value: '10502' },
        { id: 2, label: '开放目录数量', value: '5603' },
      ],
      // 表格数据
      tableData: [
        { id: 0, departmentName: '市住房城乡建委', departmentNum: '12', area: '重庆', county: '渝中区', num1: '840', num2: '288', num3: '73' },
        { id: 1, departmentName: '市交通局', departmentNum: '12', area: '重庆', county: '渝中区', num1: '840', num2: '288', num3: '73' },
        { id: 2, departmentName: '市交通局', departmentNum: '12', area: '重庆', county: '渝中区', num1: '840', num2: '288', num3: '73' },
        { id: 3, departmentName: '市规划自然资源局', departmentNum: '12', area: '重庆', county: '渝中区', num1: '840', num2: '288', num3: '73' },
        { id: 4, departmentName: '市规划自然资源局', departmentNum: '12', area: '重庆', county: '渝中区', num1: '840', num2: '288', num3: '73' },
      ],
      // 弹窗参数
      dialodData: {
        show: false,
        title: null,
      },
    }
  },
  methods: {
    centerDialod(row,field) {
      this.dialodData.show = true
      this.dialodData.title = row[field] + "数据目录详情"
    },
  },
}
</script>

<style lang="scss" scoped>
.dataResource-container {
  width: 1862px;
  margin: 30px auto;
  // 页面标题
  .container-title {
    font-size: 35px;
    font-weight: bold;
    text-align: center;
  }
  /**头部css */
  .dataResource-header,
  .dataResource-center {
    background: #ffffff;
    border-radius: 16px 16px 16px 16px;
    padding: 20px;
    margin-bottom: 20px;
  }
  .content {
    display: flex;
    justify-content: space-around;
    padding-top: 10px;
  }
  .content-item {
    width: 300px;
    height: 130px;
    background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgb(242, 242, 242) 100%);
    border: 1px solid rgb(215, 215, 215);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .item {
      font-size: 24px;
      font-weight: bold;
      margin: 10px 0;
    }
  }
}
</style>
